<template>
  <div>
    <dtDialog
      title="配置自动任务策略"
      :visible.sync="automaticTaskVisible"
      :footer-slot="true"
      @closeDialog="handleCancel"
    >
      <div class="table-container table-fullscreen">
        <div class="table-opt-container">
          <el-input v-model.trim="queryParams.appName" placeholder="输入搜索应用名称" style="width:200px;"
                    clearable="" maxlength="30" @blur="getList"
                    @keyup.enter.native="getList" @clear="getList" />
          <el-button size="small" type="primary" @click="createAutomaticTask('','add')">
            配置自动策略
          </el-button>
        </div>
        <dt-table
          v-loading="loading"
          :table-opts="tableOpts"
          :is-show-column="false"
          :pagination-data="{
            total:total,
            queryParams:queryParams
          }"
          @pagination="getList"
        />
      </div>
    </dtDialog>
    <automatic-manage ref="automaticRef" />
  </div>
</template>
<script>
import automaticManage from './automaticManage.vue'
import dataSynchronizationApi from '@/framework/api/datasync/dataSynchronization'

export default {
  name: 'TaskManagement',
  components: { automaticManage },
  dicts: ['syncStratey'],
  data() {
    return {
      tableOpts: {
        configPagination: '1',
        rowKey: 'appId',
        firstTableCol: {
          select: false,
          width: 70
        },
        indexTableCol: {
          label: '序号',
          width: 70
        },
        tableCol: [
          {
            prop: 'appName',
            label: '应用名称',
            show: true
          },
          {
            prop: 'syncStratey',
            label: '推送方式',
            show: true,
            formatter: (row) => {
              return row.syncStratey === 1 ? 'MQ' : 'API'
            }
          },
          {
            prop: 'syncStrategy',
            label: '同步频次',
            show: true
          }
        ],
        operator: {
          fixed: 'right',
          align: 'center',
          width: 148,
          operatorBtn: [
            {
              text: '修改',
              size: 'small',
              click: (row, col, cellValue) => { return this.createAutomaticTask(row, 'update') }
            },
            {
              text: '删除',
              type: 'danger',
              click: (row, col, cellValue) => {
                return this.handleDelete(row)
              }
            }
          ]
        },
        tableData: []
      },
      loading: false,
      automaticTaskVisible: false,
      queryParams: {
        appName: '',
        pageNo: 1,
        pageSize: 10
      },
      total: 0
    }
  },
  methods: {
    createAutomaticTask(row, type) {
      if (type == 'add') {
        this.$refs.automaticRef.openDialog('', 'add')
      } else {
        this.$refs.automaticRef.openDialog(row, 'update')
      }
    },
    openDialog() {
      this.automaticTaskVisible = true
      this.getList()
    },
    handleCancel() {
      this.queryParams = {
        appName: '',
        pageNo: 1,
        pageSize: 10
      }
    },
    // 获取页面列表
    getList() {
      this.loading = true
      dataSynchronizationApi.getDataAutoSyncStrategyList(this.queryParams).then((res) => {
        this.tableOpts.tableData = res.data.rows
        this.total = res.data.totalRows
        this.loading = false
      })
    },
    handleDelete(row) {
      this.$dtMessageBox({ title: '提示', message: `确定要删除“${row.appName}”吗?`, type: 'warning' }).then(() => {
        dataSynchronizationApi.delDataAutoSyncStrategy({ id: row.id, appId: row.appId }).then((res) => {
          this.getList()
          this.$dtMessage({
            message: '删除成功',
            type: 'success'
          })
        })
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.table-container{
  padding: 20px;
  margin: 0 auto;
}
.table-opt-container {
  display: flex;
  margin-bottom: 20px;
  justify-content: space-between;
}
</style>
